<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello_react</title>
</head>
<body>
  <!-- 准备容器 -->
  <div id="test"></div>
  <!-- 必须按照顺序引入 -->
  <!-- 引入react核心库 全局多一个对象React-->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom 用于支持react操作dom  全局多一个对象ReactDom-->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <!-- <script type="text/jsx" ></script>   不写jsx  直接用babel将jsx转为js -->
  <script type="text/babel" > /*此处一定要写babel 一般不在正式开发用  浏览器转化babel比较耗时  可能会出现白屏的情况*/
  // 1、创建虚拟dom
  const VDOM = <h1>hello,react</h1> /*此处不能加引号，因为不是字符串，标签*/
  const VDOM1 = <h1>hello,11</h1>
  // 2、渲染虚拟dom到页面 ReactDOM.render(虚拟DOM，容器)
  ReactDOM.render(VDOM,document.getElementById('test'))
  ReactDOM.render(VDOM1,document.getElementById('test'))  // 后面的会覆盖前面的进行 显示'hello,11'
  </script>
</body>
</html>